
<div class="layui-form-item" id="spec-form">
    <label class="layui-form-label label-required">规格参数</label>
    <div class="layui-input-block">

        <div class="param-table-list">
            <table class="layui-table margin-none">
                <tbody class="param-table-list">
                <tr ng-repeat="x in paramList" class="transition">
                    <td class="param-input-td one nowrap">
                        <input required placeholder="分组" title="请输入属性分组" name="spec_name[]" ng-model="x.name" class="layui-input">
                    </td>
                    <td class="param-input-td two nowrap">
                        <input required placeholder="名称" title="请输入属性名称" name="spec_value[]"ng-model="x.value" class="layui-input">
                    </td>
                    <td class="param-input-td thr nowrap">
                        <a ng-if="$index<1" class="color-desc">删除</a>
                        <a ng-if="$index>0" ng-click="delParam($index)">删除</a>
                        <a ng-if="$index<1" class="color-desc">上移</a>
                        <a ng-if="$index>0" ng-click="moveToUp($index)">上移</a>
                        <a ng-if="$index+1<paramList.length" ng-click="moveToDn($index)">下移</a>
                        <a ng-if="$index+1>=paramList.length" class="color-desc">下移</a>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
        <table class="layui-table">
            <tr>
                <td class="text-center notselect padding-none border-none">
                    <button type="button" class="layui-btn full-width layui-btn-primary" ng-click="addParam()">添加属性</button>
                </td>
            </tr>
        </table>
        <p class="help-block">设置多个内容值时请使用空格键隔开。</p>
    </div>
</div>
<style>
    .param-table-list {
        overflow: auto;
        max-height: 200px;
        position: relative;
        overflow-y: scroll;
    }

    .param-input-td {
        position: relative;
        padding: 0 !important;
    }

    .param-input-td.one {
        width: 30%;
    }

    .param-input-td.thr {
        width: 20%;
        text-align: center;
    }

    .param-input-td.one:before {
        content: '分组'
    }

    .param-input-td.two:before {
        content: '规格'
    }

    .param-input-td:before {
        margin: 4px;
        width: 40px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: absolute;
        background: #e2e2e2;
    }

    .param-input-td input {
        padding-left: 50px;
        border: none !important;
    }
</style>
<script>
    require(['jquery','angular'], function () {
        window.form.render();
        // 应用创建与初始化
        var app = angular.module("SpecForm", []).run(callback);
        angular.bootstrap(document.getElementById('spec-form'), [app.name]);

        // 应用事件处理
        function callback($rootScope) {
            // 属性参数
            $rootScope.paramList = filterParamList(JSON.parse('{$value|default="[]"|raw}') || []);
            // 删除菜单
            $rootScope.delParam = function (x) {
                var dialogIndex = $.msg.confirm('确定移除参数吗？', function () {
                    $rootScope.$apply(function () {
                        var tmp = [];
                        for (var i in $rootScope.paramList) {
                            (parseInt(i) !== parseInt(x)) && tmp.push($rootScope.paramList[i]);
                        }
                        $rootScope.paramList = filterParamList(tmp);
                        $.msg.close(dialogIndex);
                    });
                });
            };

            // 添加参数
            $rootScope.addParam = function () {
                $rootScope.paramList.push({name: '', value: ''});
                setTimeout(function () {
                    $('.param-table-list').scrollTop('10000')
                }, 10);
            };

            // 属性参数下移
            $rootScope.moveToDn = function (index) {
                var tmp = [], cur = $rootScope.paramList[index];
                if (index > $rootScope.paramList.length - 2) {
                    return false;
                }
                for (var i in $rootScope.paramList) {
                    (parseInt(i) !== parseInt(index)) && tmp.push($rootScope.paramList[i]);
                    (parseInt(i) === parseInt(index) + 1) && tmp.push(cur);
                }
                $rootScope.paramList = tmp;
            };

            // 属性参数上移
            $rootScope.moveToUp = function (index) {
                var tmp = [], cur = $rootScope.paramList[index];
                if (index < 1) {
                    return false;
                }
                for (var i in $rootScope.paramList) {
                    (parseInt(i) === parseInt(index) - 1) && tmp.push(cur);
                    (parseInt(i) !== parseInt(index)) && tmp.push($rootScope.paramList[i]);
                }
                $rootScope.paramList = tmp;
            };
        }

        // 过滤规格参数列表
        function filterParamList(list) {
            return list.length < 1 ? [{name: '', value: ''}] : list;
        }
    });
</script>